<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="..\styles\reset.css">
    <link rel="stylesheet" href="..\styles\01首页-A.css">
    <link rel="stylesheet" href="..\styles\03 产品列表.css">
    <!-- 轮播样式 -->
    <link rel="stylesheet" href="..\styles\public.css">
    <link rel="stylesheet" href="..\styles\slide.css">
</head>

<body>
    <!-- header -->
    <div class="autoBox" id="header">
        <!-- login+register -->
        <div class="autoBox loginRegister">
            <div class="box1200 loginRegisterIn">
                欢迎光临乐购，请<a href="../../HTML/login.html" class="active">登录</a>/<a href="../../HTML/register.html">注册</a>
            </div>
        </div>
        <!-- logo+search+cart -->
        <div class="box1200 logoSearchCart">
            <div class="logoOut">
                <div class="logo">
                    <p>乐购<br />购物</p>
                </div>
                <a id="chanpingliebiao" href="../../HTML/homePage.html"></a>
            </div>
            <div class="searchCart">
                <form action="javascript1:;" id="searchForm">
                    <input type="text" id="user" placeholder="创意文具">
                    <input type="submit" id="submitBtn" class="icon" value="">
                </form>
                <ul class="cart">
                    <li class="icon active">购物车3
                        <a id="chanpingliebiao2" href="../../HTML/shoppingcart.html"></a>
                    </li>

                    <li>我的订单</li>
                </ul>
            </div>
        </div>
        <!-- logo+search+cart -->

        <!-- allClass+topNav -->
        <div class="box1200 allClasstopNav">
            <div class="allClass icon">全部商品分类</div>
            <div class="topNav">
                <ul>
                    <li>图书</li>
                    <li>电子书</li>
                    <li>原创文学</li>
                    <li>服装</li>
                    <li>运动户外</li>
                    <li>孕婴童</li>
                    <li>家居</li>
                    <li>创意文具</li>
                    <li>地方特产</li>
                    <li>海外购</li>
                    <li>电器城</li>
                </ul>
            </div>
        </div>
        <!-- allClass+topNav -->

    </div>
    <!-- end header -->
    <!-- banner -->
    <div class="box1200" id="ebook">
        <!-- bannerLeft -->
        <div class="ebookLeftContent">
            <div class="ebookLeft">
                <!--第一步 复制html 轮播开始-->
                <div class="pptbox" id="slideBox">
                    <ul class="innerwrapper">
                        <li>
                            <a href="#"><img src="../images/banner(1).jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="../images/banner(2).jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="../images/banner(1).jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="../images/banner(1).jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="../images/banner(2).jpg" /></a>
                        </li>
                    </ul>
                    <ul class="controls">
                        <li class="current">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                    <span class="btnleft"></span>
                    <span class="btnright"></span>
                </div>
                <!--轮播结束-->
            </div>
        </div>
        <!-- end ebookLeft   -->
        <!-- ebookRight -->
        <ul class="ebookRight">
            <h3>新书畅销榜</h3>
            <li>
                <p class="bookNum"><span class="active">1</span></p>
                <img src="../images/demo-book.jpg" alt="">
                <p class="bookTitle">从你的世界路过</p>
            </li>
            <li>
                <p class="bookNum"><span class="active">2</span></p>
                <img src="../images/demo-book.jpg" alt="">
                <p class="bookTitle">从你的世界路过</p>
            </li>
            <li>
                <p class="bookNum"><span class="active">3</span></p>
                <img src="../images/demo-book.jpg" alt="">
                <p class="bookTitle">从你的世界路过</p>
            </li>
            <li>
                <p class="bookNum"><span class="active">4</span></p>
                <img src="../images/demo-book.jpg" alt="">
                <p class="bookTitle">从你的世界路过</p>
            </li>
            <li>
                <p class="bookNum"><span class="active">5</span></p>
                <img src="../images/demo-book.jpg" alt="">
                <p class="bookTitle">从你的世界路过</p>
            </li>
            <li>
                <p class="bookNum"><span class="active">6</span></p>
                <img src="../images/demo-book.jpg" alt="">
                <p class="bookTitle">从你的世界路过</p>
            </li>
            <li>
                <p class="bookNum"><span class="active">7</span></p>
                <img src="../images/demo-book.jpg" alt="">
                <p class="bookTitle">从你的世界路过</p>
            </li>
        </ul>
        <!-- end ebookRight -->
    </div>
    <!-- end banner -->
    <!-- game box -->
    <div class="box1200" id="gamebox">
        <img src="..\images\demo-moshou.png" alt="">
    </div>
    <!-- end gamebox -->
    <!-- discount -->
    <div class="box1200 marginTop5" id="recommend">
        <div class="publicHead">
            <div class="bookDiscountTitle">乐购●图书折扣区</div>
            <ul class="publicHederRight">
                <!-- <li class="active">●</li>
                    <li>●</li>
                    <li>●</li> -->
            </ul>
        </div>
        <!-- recommendContent -->
        <div class="recommendContent">
            <div class="box199250">
                <img src="../images\22935553-1_l.jpg" alt="">
                <p class="icon limitedTime"></p>
                <p class="pName">白夜行 东野圭吾</p>
                <p class="pDiscription">推荐：</p>
                <p class="pPrice colorRed">￥：38</p>
            </div>
            <div class="box199250">
                <img src="../images\22935553-1_l.jpg" alt="">
                <p class="icon limitedTime"></p>
                <p class="pName">白夜行 东野圭吾</p>
                <p class="pDiscription">推荐</p>
                <p class="pPrice colorRed">￥：38</p>
            </div>
            <div class="box199250">
                <img src="../images\22935553-1_l.jpg" alt="">
                <p class="icon limitedTime"></p>
                <p class="pName">白夜行 东野圭吾</p>
                <p class="pDiscription">推荐：</p>
                <p class="pPrice colorRed">￥：38</p>
            </div>
            <div class="box199250">
                <img src="../images\22935553-1_l.jpg" alt="">
                <p class="icon limitedTime"></p>
                <p class="pName">白夜行 东野圭吾</p>
                <p class="pDiscription">推荐：</p>
                <p class="pPrice colorRed">￥：38</p>
            </div>
            <div class="box199250">
                <img src="../images\22935553-1_l.jpg" alt="">
                <p class="icon limitedTime"></p>
                <p class="pName">白夜行 东野圭吾</p>
                <p class="pDiscription">推荐：</p>
                <p class="pPrice colorRed">￥：38</p>
            </div>

            <div class="box199250 borderRight">
                <img src="../images\22935553-1_l.jpg" alt="">
                <p class="icon limitedTime"></p>
                <p class="pName">白夜行 东野圭吾</p>
                <p class="pDiscription">推荐：</p>
                <p class="pPrice colorRed">￥：38</p>
            </div>
            <div class="box199250">
                <img src="../images\22788959-1_l.jpg" alt="">
                <p class="icon limitedTime"></p>
                <p class="pName">偷影子的人</p>
                <p class="pDiscription">推荐：</p>
                <p class="pPrice colorRed">￥：89</p>
            </div>
            <div class="box199250">
                <img src="../images\22788959-1_l.jpg" alt="">
                <p class="icon limitedTime"></p>
                <p class="pName">偷影子的人</p>
                <p class="pDiscription">推荐：</p>
                <p class="pPrice colorRed">￥：89</p>
            </div>
            <div class="box199250">
                <img src="../images\22788959-1_l.jpg" alt="">
                <p class="icon limitedTime"></p>
                <p class="pName">偷影子的人</p>
                <p class="pDiscription">推荐：</p>
                <p class="pPrice colorRed">￥：89</p>
            </div>
            <div class="box199250">
                <img src="../images\22788959-1_l.jpg" alt="">
                <p class="icon limitedTime"></p>
                <p class="pName">偷影子的人</p>
                <p class="pDiscription">推荐：</p>
                <p class="pPrice colorRed">￥：89</p>
            </div>
            <div class="box199250">
                <img src="../images\22788959-1_l.jpg" alt="">
                <p class="icon limitedTime"></p>
                <p class="pName">偷影子的人</p>
                <p class="pDiscription">推荐：</p>
                <p class="pPrice colorRed">￥：89</p>
            </div>

            <div class="box199250 borderRight">
                <img src="../images\22788959-1_l.jpg" alt="">
                <p class="icon limitedTime"></p>
                <p class="pName">偷影子的人</p>
                <p class="pDiscription">推荐：</p>
                <p class="pPrice colorRed">￥：89</p>
            </div>

        </div>
    </div>
    <!-- end discount -->
    <!-- newbook -->
    <div class="box1200" id="newbook">
        <!-- 标题 -->
        <div class="publicTitle"><span class="newBookTitle colorOrange">新</span>书上架</div>

        <!-- end标题 -->
        <div class="recommendContent1">
            <div class="newbookLeft">
                <div class="box180270">
                    <img src="../images\22928335-1_l.jpg" alt="">
                    <p class="pName">白夜行 东野圭吾</p>
                    <p class="pName2">夏季清凉清仓</p>
                    <p class="pPrice colorRed">￥：49</p>
                </div>
                <div class="box180270">
                    <img src="../images\22928335-1_l.jpg" alt="">
                    <p class="pName">白夜行 东野圭吾</p>
                    <p class="pName2">夏季清凉清仓</p>
                    <p class="pPrice colorRed">￥：49</p>
                </div>
                <div class="box180270">
                    <img src="../images\22928335-1_l.jpg" alt="">
                    <p class="pName">白夜行 东野圭吾</p>
                    <p class="pName2">夏季清凉清仓</p>
                    <p class="pPrice colorRed">￥：49</p>
                </div>
                <div class="box180270">
                    <img src="../images\22928335-1_l.jpg" alt="">
                    <p class="pName">白夜行 东野圭吾</p>
                    <p class="pName2">夏季清凉清仓</p>
                    <p class="pPrice colorRed">￥：49</p>
                </div>
                <div class="box180270">
                    <img src="../images\22928335-1_l.jpg" alt="">
                    <p class="pName">白夜行 东野圭吾</p>
                    <p class="pName2">夏季清凉清仓</p>
                    <p class="pPrice colorRed">￥：49</p>
                </div>
                <div class="box180270">
                    <img src="../images\22928335-1_l.jpg" alt="">
                    <p class="pName">白夜行 东野圭吾</p>
                    <p class="pName2">夏季清凉清仓</p>
                    <p class="pPrice colorRed">￥：49</p>
                </div>
                <div class="box180270">
                    <img src="../images\22928335-1_l.jpg" alt="">
                    <p class="pName">白夜行 东野圭吾</p>
                    <p class="pName2">夏季清凉清仓</p>
                    <p class="pPrice colorRed">￥：49</p>
                </div>
                <div class="box180270">
                    <img src="../images\22928335-1_l.jpg" alt="">
                    <p class="pName">白夜行 东野圭吾</p>
                    <p class="pName2">夏季清凉清仓</p>
                    <p class="pPrice colorRed">￥：49</p>
                </div>
                <div class="box180270">
                    <img src="../images\22928335-1_l.jpg" alt="">
                    <p class="pName">白夜行 东野圭吾</p>
                    <p class="pName2">夏季清凉清仓</p>
                    <p class="pPrice colorRed">￥：49</p>
                </div>
                <div class="box180270">
                    <img src="../images\22928335-1_l.jpg" alt="">
                    <p class="pName">白夜行 东野圭吾</p>
                    <p class="pName2">夏季清凉清仓</p>
                    <p class="pPrice colorRed">￥：49</p>
                </div>
            </div>
            <div class="newbookRight">
                <h3>主编推荐</h3>
                <ul>
                    <li>
                        <p class="bookNum colorRed">1</p>
                        <div class="liRight">
                            <p class="bookName">从你的世界路过</p>
                            <p class="bookImg">
                                <img src="../images/demo-book.jpg" alt="">
                            </p>
                            <p class="bookDiscription">
                                《从你的全世界路过》入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫、陈国富倾力推荐，1500万次转发，超4亿阅读。
                            </p>
                        </div>
                    </li>
                    <!-- <h3>新书畅销榜</h3> -->
                    <ul>
                        <li>
                            <p class="bookNum colorRed">2</p>
                            <div class="liRight">
                                <p class="bookName">从你的世界路过</p>
                                <p class="bookImg">
                                    <img src="../images/demo-book.jpg" alt="">
                                </p>
                                <p class="bookDiscription">
                                    《从你的全世界路过》入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫、陈国富倾力推荐，1500万次转发，超4亿阅读。
                                </p>
                            </div>
                        </li>
                        <!-- <h3>新书畅销榜</h3> -->
                        <ul>
                            <li>
                                <p class="bookNum colorRed">3</p>
                                <div class="liRight">
                                    <p class="bookName">从你的世界路过</p>
                                    <p class="bookImg">
                                        <img src="../images/demo-book.jpg" alt="">
                                    </p>
                                    <p class="bookDiscription">
                                        《从你的全世界路过》入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫、陈国富倾力推荐，1500万次转发，超4亿阅读。
                                    </p>
                                </div>
                            </li>
                            <!-- <h3>新书畅销榜</h3> -->
                            <ul>
                                <li>
                                    <p class="bookNum">4</p>
                                    <div class="liRight">
                                        <p class="bookName">从你的世界路过</p>
                                        <p class="bookImg">
                                            <img src="../images/demo-book.jpg" alt="">
                                        </p>
                                        <p class="bookDiscription">
                                            《从你的全世界路过》入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫、陈国富倾力推荐，1500万次转发，超4亿阅读。
                                        </p>
                                    </div>
                                </li>
                                <!-- <h3>新书畅销榜</h3> -->
                                <ul>
                                    <li>
                                        <p class="bookNum">5</p>
                                        <div class="liRight">
                                            <p class="bookName">从你的世界路过</p>
                                            <p class="bookImg">
                                                <img src="../images/demo-book.jpg" alt="">
                                            </p>
                                            <p class="bookDiscription">
                                                《从你的全世界路过》入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫、陈国富倾力推荐，1500万次转发，超4亿阅读。
                                            </p>
                                        </div>
                                    </li>
                                    <!-- <h3>新书畅销榜</h3> -->
                                    <ul>
                                        <li>
                                            <p class="bookNum">6</p>
                                            <div class="liRight">
                                                <p class="bookName">从你的世界路过</p>
                                                <p class="bookImg">
                                                    <img src="../images/demo-book.jpg" alt="">
                                                </p>
                                                <p class="bookDiscription">
                                                    《从你的全世界路过》入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫、陈国富倾力推荐，1500万次转发，超4亿阅读。
                                                </p>
                                            </div>
                                        </li>
                                        <!-- <h3>新书畅销榜</h3> -->

            </div>
        </div>

    </div>
    <!-- end ebook -->
    <!-- only -->
    <div class="box1200" id="supply">
        <div class="publicHead">
            <div class="publicHederLeft colorOrange">
                独家提供
            </div>
            <div class="publicHederRight">
                <ul>
                    <li class="active ">金融货币</li>
                    <li>社会文学</li>
                    <li>科学技术</li>
                    <!-- <li>社会文学</li>
                    <li>科学技术</li>
                    <li>社会文学</li>
                    <li>科学技术</li> -->
                </ul>
            </div>
        </div>
        <div class="boxout540">
            <div class="pptbox" id="productslideBox">
                <ul class="innerwrapper">
                    <li class="p">
                        <!-- 第一页产品 -->
                        <a href="#"><img src="../images/product2.png" /></a>
                    </li>
                    <li class="p">
                        <a href="#"><img src="../images/product1.png" /></a>
                    </li>

                </ul>
                <ul class="controls">
                    <li class="current">1</li>
                    <li>2</li>

                </ul>
                <span class="btnleft"></span>
                <span class="btnright"></span>
            </div>
        </div>

    </div>

    <!-- end only -->
    <!-- like -->
    <div class="box1200" id="likeboxs">
        <div class="publicHead">
            <div class="publicHederLeft colorOrange">
                猜你喜欢
            </div>
            <div class="publicHederRight">
                <!-- <ul>
                    <li class="active ">金融货币</li>
                    <li>社会文学</li>
                    <li>科学技术</li> -->
                <!-- <li>社会文学</li>
                    <li>科学技术</li>
                    <li>社会文学</li>
                    <li>科学技术</li> -->
                </ul>
            </div>
        </div>
        <div class="likeboxscontent">
            <div class="box180270">
                <img src="../images\22928335-1_l.jpg" alt="">
                <p class="pName">白夜行 东野圭吾</p>
                <p class="pName2">夏季清凉清仓</p>
                <p class="pPrice colorRed">￥：49</p>
            </div>
            <div class="box180270">
                <img src="../images\22928335-1_l.jpg" alt="">
                <p class="pName">白夜行 东野圭吾</p>
                <p class="pName2">夏季清凉清仓</p>
                <p class="pPrice colorRed">￥：49</p>
            </div>
            <div class="box180270">
                <img src="../images\22928335-1_l.jpg" alt="">
                <p class="pName">白夜行 东野圭吾</p>
                <p class="pName2">夏季清凉清仓</p>
                <p class="pPrice colorRed">￥：49</p>
            </div>
            <div class="box180270">
                <img src="../images\22928335-1_l.jpg" alt="">
                <p class="pName">白夜行 东野圭吾</p>
                <p class="pName2">夏季清凉清仓</p>
                <p class="pPrice colorRed">￥：49</p>
            </div>
            <div class="box180270">
                <img src="../images\22928335-1_l.jpg" alt="">
                <p class="pName">白夜行 东野圭吾</p>
                <p class="pName2">夏季清凉清仓</p>
                <p class="pPrice colorRed">￥：49</p>
            </div>
            <div class="box180270">
                <img src="../images\22928335-1_l.jpg" alt="">
                <p class="pName">白夜行 东野圭吾</p>
                <p class="pName2">夏季清凉清仓</p>
                <p class="pPrice colorRed">￥：49</p>
            </div>
            <div class="box180270">
                <img src="../images\22928335-1_l.jpg" alt="">
                <p class="pName">白夜行 东野圭吾</p>
                <p class="pName2">夏季清凉清仓</p>
                <p class="pPrice colorRed">￥：49</p>
            </div>
            <div class="box180270">
                <img src="../images\22928335-1_l.jpg" alt="">
                <p class="pName">白夜行 东野圭吾</p>
                <p class="pName2">夏季清凉清仓</p>
                <p class="pPrice colorRed">￥：49</p>
            </div>
            <div class="box180270">
                <img src="../images\22928335-1_l.jpg" alt="">
                <p class="pName">白夜行 东野圭吾</p>
                <p class="pName2">夏季清凉清仓</p>
                <p class="pPrice colorRed">￥：49</p>
            </div>
            <div class="box180270">
                <img src="../images\22928335-1_l.jpg" alt="">
                <p class="pName">白夜行 东野圭吾</p>
                <p class="pName2">夏季清凉清仓</p>
                <p class="pPrice colorRed">￥：49</p>
            </div>
            <div class="box180270">
                <img src="../images\22928335-1_l.jpg" alt="">
                <p class="pName">白夜行 东野圭吾</p>
                <p class="pName2">夏季清凉清仓</p>
                <p class="pPrice colorRed">￥：49</p>
            </div>
            <div class="box180270">
                <img src="../images\22928335-1_l.jpg" alt="">
                <p class="pName">白夜行 东野圭吾</p>
                <p class="pName2">夏季清凉清仓</p>
                <p class="pPrice colorRed">￥：49</p>
            </div>

        </div>
        <div class="likeboxsbottom">
            <div class="box120111">
                <img src="..\images\2016080314240628345.jpg" alt="">
            </div>
            <div class="box120111">
                <img src="..\images\2016080314240628345.jpg" alt="">
            </div>
            <div class="box120111">
                <img src="..\images\2016080314240628345.jpg" alt="">
            </div>
            <div class="box120111">
                <img src="..\images\2016080314240628345.jpg" alt="">
            </div>
            <div class="box120111">
                <img src="..\images\2016080314240628345.jpg" alt="">
            </div>
            <div class="box120111">
                <img src="..\images\2016080314240628345.jpg" alt="">
            </div>
        </div>
    </div>
    <!-- end like -->
    <!-- game box -->
    <div class="box1200" id="gamebox">
        <img src="..\images\demo-moshou.png" alt="">
    </div>
    <!-- end gamebox -->

    <!-- footer -->
    <div class="autoBox" id="footer">
        <div id="footer">
            <div class="footer1"></div>
            <div class="footer2">
                <div class="footer2-content">
                    <img src="../images/222_11.png" alt="" srcset="">
                    <img src="../images/222_13.png" alt="" srcset="">
                    <img src="../images/222_15.png" alt="" srcset="">
                    <img src="../images/222_17.png" alt="" srcset="">

                </div>
            </div>
            <div class="footer3">
                <div class="footer3BG"></div>
                <div class="footer3-content">
                    <div class="footer3-1 flex">
                        <p>购物指南</p>
                        <a href="javascript:;">购物流程</a>
                        <a href="javascript:;">发票制度</a>
                        <a href="javascript:;">账户管理</a>
                        <a href="javascript:;">会员优惠</a>
                    </div>
                    <div class="footer3-2 flex">
                        <p>支付方式</p>
                        <a href="javascript:;">货到付款</a>
                        <a href="javascript:;">网上支付</a>
                        <a href="javascript:;">礼品卡支付</a>
                        <a href="javascript:;">银行转帐</a>
                    </div>
                    <div class="footer3-3 flex">
                        <p>订单服务</p>
                        <a href="javascript:;">订单配送查询</a>
                        <a href="javascript:;">订单状态说明</a>
                        <a href="javascript:;">自助取消订单</a>
                        <a href="javascript:;">自助修改订单</a>
                    </div>
                    <div class="footer3-4 flex">
                        <p> 退换货</p>
                        <a href="javascript:;">退换货政策</a>
                        <a href="javascript:;">自助申请退换货</a>
                        <a href="javascript:;">退换货进度查询</a>
                        <a href="javascript:;">退款方式和时间</a>
                    </div>
                    <div class="footer3-5 flex">
                        <p> 商家服务</p>
                        <a href="javascript:;">商家中心</a>
                        <a href="javascript:;">运营服务</a>
                        <a href="javascript:;">加入尾品汇</a>
                        <a href="javascript:;">&nbsp;</a>
                    </div>
                </div>
            </div>
            <div class="footer4">
                <p>
                    <a href="javascript:;"> 公司简介</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="javascript:;">Investor Relations</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="javascript:;">网站联盟</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="javascript:;">乐购招商</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="javascript:;">机构销售</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="javascript:;">手机乐购</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="javascript:;">官方Blog</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="javascript:;">热词搜索</a>
                </p>
            </div>
            <div class="footer5">
                <p>Copyright (C) 乐购网 2004-2016, All Rights Reserved</p>
            </div>
        </div>
    </div>
    <!-- end footer -->




</body>
<script src="../scripts/jquery1.11.min.js"></script>
<script src="../scripts/tyslide.js"></script>
<!-- 引入配置文件 -->
<script src="../scripts/beforeEffects.js"></script>
<script src="../scripts/afterEffects.js"></script>
<script src="../scripts/productList.js"></script>

</html>